<template>
	<view class="u-wrap">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view v-else class="bg-white pt-2 rounded-15 m-2 rounded-15">
				<!-- 搜索 -->
				<view class="bg-white pb-2 px-2">
					<view class="d-flex py-1 rounded-50 span-20 pl-3 pr-2 bg-light-secondary j-sb">
						<input class="ml-2 flex-1" @confirm="seach_confirm" v-model="seach_keywords" type="text" placeholder="搜索商品品牌名称关键字查找" @input="seach_input"  />
						<u-icon @click="delete_confirm"  name="close" color="#999999" size="28"></u-icon>
					</view>
				</view>
				
				<view class="mt-5" v-if="u_loadmore">
					<u-loadmore status="loading" icon-type="circle" />
				</view>
				<view v-else>
					<view class="" v-if="seach_show">
						<u-index-list :scrollTop="scrollTop" :index-list="brand_list.brandIndex">
							<view class="brand" v-for="(item,index) in brand_list.brandIndex" :key="index">
								<u-index-anchor :use-slot="true" :index="item">
									<text class="anchor-text">{{item}}</text>
								</u-index-anchor>
								<view class="px-2 border-box brand-bottom" v-for="(items,indexs) in brand_list.brandList[item]" :key="indexs"  :class="items.show?'brand_action':''" @click="brand_tab(items)">
									<view class="border-bottom d-flex j-sb py-2">
										<view class="">
											{{items.brand_name}}
										</view>
										<view class="mr-2" v-if="items.show">
											<u-icon name="checkbox-mark" color="#ff0000" size="35"></u-icon>
										</view>
									</view>
									
								</view>	
							</view>	
						</u-index-list>
					</view>
					<view class="brand" v-else>
						<view class="" v-if="!seach_list.length">
							<view class="d-flex flex-column j-center a-center h-100 pb-3">
								<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
								<view class="">暂无任何商品</view>
							</view>
						</view>
						<view class="" v-else>
							<view class="px-2 border-box brand-bottom" v-for="(item,index) in seach_list" :key="index" :class="item.show?'brand_action':''"  @click="brand_tab(item)">
								<view class="border-bottom d-flex j-sb py-2">
									<view >
										{{item.brand_name}}
									</view>
									<view class="mr-2" v-if="item.show">
										<u-icon name="checkbox-mark" color="#ff0000" size="35"></u-icon>
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>	
		<view class="footer"></view>
		<view class="bg-white  py-2 w-100 d-flex j-sb btn position-fixed bottom-0">
			<view class="d-flex a-center ml-5">
				<u-checkbox-group>
					<u-checkbox  active-color="#ee514c" size="45" v-model="checked" shape="circle" @change="checkboxAll" >全选</u-checkbox>
				</u-checkbox-group>
			</view>
			<button type="warn" @click="preserve">确定(已选{{conut}})</button>
		</view>
	</view>
</template>

<script>
	import Pinyin from "../../common/pinyin.js"
	let pinyin = new Pinyin();
	
	export default {
		data() {
			return {
				list:[],
				goods_id:'', // 公共ID
				brand_list:"", // 品牌列表
				scrollTop: 0, // 
				brand_id:"", // 索引
				seach_show:true,
				seach_keywords:"", // 关键字
				seach_list:"", // 搜索列表
				checked:false,
				u_loadmore:true, // 加载中
			}
		},
		computed:{
			conut(){
				let num=0
				this.list.filter(v=>{
					if(v.show){
						return num++
					}
				})
				return num
			}
		},
		methods: {
			checkboxAll(e){
				if(e.value){
					this.list.some(v=>{
						v.show=true
					})
				}else{
					this.list.some(v=>{
						v.show=false
					})
				}
			},
			// 品牌
			brand_tab(item){
				item.show=!item.show
				console.log(item)
			},
			seach_input(e){
				this.seach_keywords=e.detail.value
			},
			// 搜索品牌
			seach_confirm(){
				let keywords=this.seach_keywords
				if(keywords){
					this.seach_list=this.list.filter(v=>{
						if(v.brand_name.indexOf(keywords)!=-1){
							return v
						}
					})
					console.log(this.seach_list)
				}
				this.seach_show=false
			},
			// x
			delete_confirm(){
				this.seach_keywords=""
				this.seach_show=true
			},
			// 保存
			preserve(){
				if(this.conut==0){
					this.$u.toast('您还未选择指定品牌')
				}else{
					let arr=this.list.filter(v=>{
						if(v.show){
							return v
						}
					})
					uni.setStorageSync("cash_brand",JSON.stringify(arr))
					uni.navigateTo({
						url:'/pagesA/cash/cash-brand-selected?brand='+'品牌'
					})
				}
			}
		},
		onLoad(e) {
			this.goods_id=e.goods_id
			this.$H.post("admin/merchant/goods/detail",{
				goods_id:this.goods_id
			}).then(res=>{
				this.brand_id=res.data.brand_id
			})
			// 数据格式化得方法
			// list:[{},{}]
			const brandData = list =>{
				const brandList= {}
				// cons brandIndex=[]
				// 1 遍历 list 数组
				list.forEach(item=>{
					// 2 获取每一个城市的首字母
					const first=pinyin.getCamelChars(item.brand_name.substr(0, 1).toUpperCase())
					// 3 判断 brandList 中是否有该分类
					if(brandList[first]){
						// 4 如果有 直接往该分类中 push 数据
						// brandList[first].push(item)
						brandList[first].push(item)
					}else{
						// 5 如果没有 就先创建一个数组 然后  把当前城市信息添加到数组中
						brandList[first]=[item]
					}
				})
				// 获取索引数据
				const brandIndex=Object.keys(brandList).sort()
				return {
					brandList,
					brandIndex
				}
			}
			
			uni.request({
				url:"https://b2b2c.ecjia.com/sites/storeapi/admin/merchant/goods/brand",
				method:"POST",
				header:{
					'Content-Type':'application/json;charset=UTF-8',
					'api-version':'2.28',
					'token':uni.getStorageSync("token")
				},
				data:{
					pagination:{
						count:200,
						page:1
					},
					'token':uni.getStorageSync("token")
				},
				success: (res) => {
					if(res.data){
						let brand_res=res.data.data.filter(v=>{
							if(v.is_show){
								v.show=false
								return v
							}
						})
						this.list=res.data.data
						this.brand_list=brandData(brand_res)
						this.u_loadmore=false 
					}else {
						return
					}
				}
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss">
		.brand_action{
			color: #FF0000;
		}
		.anchor-text {
			color: red;
		}
		.brand-bottom:last-child ::after{
			border: none;
			content: "";
		}
		
		.btn /deep/ button{
			width: 61%;
			border-radius: 60upx;
			margin-left: 50upx;
			background: linear-gradient(to right,#F31E3E,#FB4F37);
		}
</style>
